<template>
	<view class="box">
		<view class="tab-nav">
			<view class="tab-list-item" v-for="(item,index) in toggleList" :key="index"
				@click="clickToggleHandle(item,index)">
				<view :class="{ active: indexs==index}" class="text">{{ item.name }}</view>
				<view class="line" v-if="indexs==index">

				</view>
			</view>
		</view>
		<view class="wrap">
			<view class="tit">
				快递信息
			</view>
			<view class="item">
				<text class="name">快递公司</text>
				<text class="content">{{info[indexs].delivery_company.name}}</text>
			</view>
			<view class="item">
				<text class="name">快递单号</text>
				<view class="itemright">
					<text class="content">{{info[indexs].delivery_no}}</text>
					<image @click="copy" :src="baseUrl +'/static/icon/copy.png'" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="wraps" v-if="info[indexs].delivery_tracks.length>0">
			<view class="wrapstop">
				物流信息
			</view>

			<view class="wrapsn">
				<u-steps :current="info[indexs].delivery_tracks.length" direction="column" activeColor="#FFC300">
					<u-steps-item v-for=" (item,index) in info[indexs].delivery_tracks" :key="index" :title="item.context"
						:desc="item.time">
					</u-steps-item>
				</u-steps>
			</view>
		</view>
		<view class="empty3">

		</view>
		<view class="btnwrap">
			<!-- <button @tap="apply" >申请售后</button> -->
			<view class="next" @click="confirm">
				确认收货
			</view>

		</view>
		<u-popup :show="applyshow" mode="center" @close="applyshow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">

				<text class="prompt_tit f46 fw7">选择售后类型</text>
				<view class="btnwraps">
					<view class="abtn">
						未收到货，我要退款
					</view>
					<view class="abtn" @click="gonexts">
						已收到货，我要退货退款
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="flagsh2" mode="center" @close="flagsh2 = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="prompt_tit">确定要收货吗</text>
				<view class="prompt_ntm flex_ld_a">
					<text @click="flagsh2 = false">再想想</text>
					<text @click="submitsh">确定</text>
				</view>
			</view>
		</u-popup>
		<u-popup :show="tipShow" mode="bottom" @close="tipShow = false" closeable bgColor="transparent" duration="400"
			:safeAreaInsetBottom="false">
			<view class="prompt2 flex_ZC">
				<text class="f36 " style="margin-top:20rpx">权益生效规则</text>
				<view class="selwrap">
					<view class="selitem" v-for="(item,index) in sellist" :key="index" @click="changesel(item)">
						<text>{{item.label}} </text>
						<image v-if="item.select" :src="baseUrl + '/static/icon/i_xz.png'" mode="aspectFill"></image>
						<image v-if="!item.select" :src="baseUrl +'/static/icon/i_wxz.png'" mode="aspectFill"></image>
					</view>
				</view>
				<view class="tits">
					提示
				</view>
				<view class="contents">
					如选择立即生效，该笔订单所含More值和徽章权益将立即赠送，但因虚拟商品生效也将导致7天无理由退货不可用，如遇商品质量问题仍可以换货，
				</view>
				<view class="prompt_ntm2 flex_ld_a">

					<text @click="submitsh">确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		delivery,
		receive
	} from "../../api/order.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				info: {
					delivery_company: {
						name: ""
					},
					delivery_tracks: {

					}
				},
				tipShow: false,
				id: "",
				sellist: [

					{
						label: "立即生效",
						select: true,
						type: 2
					},
					{
						label: "7天后自动生效",
						select: false,
						type: 1
					}
				],
				seltype: 2,
				flagsh2: false,
				applyshow: false,
				toggleList: [
					
		


				],
				indexs: 0,
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getinfo()
		},
		onShow(options) {
			this.applyshow = false
			console.log(options, "我收到了")
		},
		methods: {
			clickToggleHandle(ele, index) {

				this.indexs = index
				this.toggleList.forEach(item => item.select = false)

				this.page = 1
				
			},
			gonexts() {
				uni.navigateTo({
					url: "/pageOrder/aboutorder/applyaftersale?id=" + this.info.order_id
				})
			},
			apply() {
				this.applyshow = true
			},
			changesel(ele) {
				this.sellist.forEach(item => item.select = false)
				// this.currLabel = ele.label
				ele.select = true
				this.seltype = ele.type
			},
			confirm() {
				if (this.info.shop_order.equity_selected == 2) {
					this.flagsh2 = true
				}
				if (this.info.shop_order.equity_selected == 1) {
					this.tipShow = true
				}

			},
			submitsh() {
				let that = this
				// #ifdef MP-WEIXIN
				if (that.info.order_relation.payment_trade != null) {
					if (that.info.order_relation.payment_trade.source == "miniapp") {
						const orderData = {
							merchant_id: that.info.order_relation.payment_trade.wxpay_mch_id,
							merchant_trade_no: that.info.order_relation.payment_trade.out_trade_no,
							transaction_id: that.info.order_relation.payment_trade.trade_no
						};
						wx.openBusinessView({
							businessType: 'weappOrderConfirm',
							extraData: orderData,
							success(res) {
								let data = {

								}
								if (that.info.shop_order.equity_selected == 2) {
									data = {
										id: that.info.order_id,
									}
								}
								if (that.info.shop_order.equity_selected == 1) {
									data = {
										id: that.info.order_id,
										equity_selected: that.seltype
									}
								}
								if (res.extraData.status == "success") {
									receive(data).then(res => {
										if (res.code == 1) {
											that.flagsh2 = false
											that.tipShow = false
											setTimeout(() => {
												uni.redirectTo({
													url: "/pageOrder/aboutorder/orderlist"
												})
											}, 1000)
										}
										uni.$u.toast(res.msg)
									})
								}
								console.log(res, "sdasd")

							},
							fail(res) {
								console.error('打开订单确认页面失败', res);
							},
							cancel(res) {
								console.error('取消订单', res);
							},

						});
					}
				} else {
					let data = {

					}
					if (that.info.shop_order.equity_selected == 2) {
						data = {
							id: that.info.order_id,
						}
					}
					if (that.info.shop_order.equity_selected == 1) {
						data = {
							id: that.info.order_id,
							equity_selected: that.seltype
						}
					}
					receive(data).then(res => {
						if (res.code == 1) {
							that.tipShow = false
							that.flagsh2 = false
							setTimeout(() => {
								uni.redirectTo({
									url: "/pageOrder/aboutorder/orderlist"
								})
							}, 1000)
						}
						uni.$u.toast(res.msg)
					})
				}
				// #endif
				// #ifdef H5 || MP-ALIPAY
				let data = {

				}
				if (that.info.shop_order.equity_selected == 2) {
					data = {
						id: that.info.order_id,
					}
				}
				if (that.info.shop_order.equity_selected == 1) {
					data = {
						id: that.info.order_id,
						equity_selected: that.seltype
					}
				}
				receive(data).then(res => {
					if (res.code == 1) {
						that.tipShow = false
						that.flagsh2 = false
						setTimeout(() => {
							uni.redirectTo({
								url: "/pageOrder/aboutorder/orderlist"
							})
						}, 1000)
					}
					uni.$u.toast(res.msg)
				})
				// #endif

			},
			getinfo() {
				delivery({
					id: this.id
				}).then(res => {
					this.info = res.data
					this.info.forEach((item,index) => {
						if(item.delivery_company){
							return this.toggleList.push({
								name:"包裹"+(index+1)
							})
						}
						
					})
					console.log(this.toggleList, "我要看")
				})
			},
			goapply() {
				uni.navigateTo({
					url: "/pageOrder/aboutorder/applyaftersale"
				})
			},
			copy() {
				uni.setClipboardData({
					data: this.info.delivery_no,
					success: function() {
						uni.$u.toast('复制成功');
					}
				});

			},
		}
	}
</script>

<style lang="scss">
	.box {
		width: 750rpx;
		height: 100hv;
		position: relative;
	}

	.wrap {
		width: 690rpx;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 32rpx;

		.tit {
			font-weight: 700;
			font-size: 30rpx;
			color: #3D3D3D;
			padding-top: 18rpx;
			margin-left: 24rpx;
		}

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-left: 24rpx;
			margin-right: 24rpx;
			margin-top: 24rpx;

			.name {
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
			}

			.itemright {
				display: flex;
				align-items: center;

				>image {
					width: 20rpx;
					height: 20rpx;
					margin-left: 10rpx;
				}
			}

			.content {
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
			}
		}
	}

	.wraps {
		width: 690rpx;
		min-height: 148rpx;
		background: #fff;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.wrapstop {
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
		padding-top: 20rpx;
		margin-left: 30rpx;
	}

	.wrapsn {
		width: 90%;
		margin: 0 auto;
		background-color: #fff;
		padding: 30rpx;
	}

	.btnwrap {
		width: 750rpx;
		height: 136rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;

		>button {
			width: 300rpx;
			height: 80rpx;
			border-radius: 190rpx 190rpx 190rpx 190rpx;
			border: 2rpx solid #FFC400;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFC400;
			text-align: center;
			line-height: 80rpx;
			background: #fff;
		}

		.next {
			width: 312rpx;
			height: 80rpx;
			background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
			border-radius: 190rpx 190rpx 190rpx 190rpx;
			text-align: center;
			line-height: 80rpx;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
			margin-right: 40rpx;
		}
	}

	.prompt {
		width: 600rpx;
		background: #ffffff;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 40rpx;
	}

	.prompt>text {
		margin-top: 40rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #666666;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.prompt_ntm {
		width: 100%;
		font-size: 30rpx;
		margin-top: 50rpx;
	}

	.prompt_ntm>text:nth-child(1) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #F2F2F2;
		border-radius: 40rpx;
		color: #333333;
	}

	.prompt_ntm>text:nth-child(2) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 40rpx;
		color: #ffffff;
	}

	.selwrap {
		width: 620rpx;
		margin: 0 auto;
		margin-top: 40rpx;
	}

	.selitem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;

		>text {
			font-weight: 400;
			font-size: 30rpx;
			color: #3D3D3D;
		}

		>image {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.tits {
		width: 620rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #3D3D3D;
		margin: 0 auto;
		margin-top: 50rpx;
	}

	.contents {
		width: 620rpx;
		height: 108rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
	}

	.prompt_ntm {
		width: 100%;
		font-size: 30rpx;
		margin-top: 50rpx;
	}

	.prompt_ntm2 {
		width: 100%;
		font-size: 30rpx;
		margin-top: 50rpx;

		>text {
			width: 690rpx;
			height: 80rpx;
			background: linear-gradient(270deg, #FA2222 2%, #FFC400 98%);
			border-radius: 190rpx 190rpx 190rpx 190rpx;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
		}
	}

	.prompt2 {
		width: 750rpx;
		background: #ffffff;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 40rpx;
	}

	.abtn {
		width: 470rpx;
		height: 72rpx;
		background: linear-gradient(270deg, #FA2222 2%, #FFC400 98%);
		border-radius: 280rpx 280rpx 280rpx 280rpx;
		margin-top: 20rpx;
		font-weight: 400;
		font-size: 34rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 72rpx;
	}

	.tab-nav {
		width: 750rpx;
		height: 100rpx;
		background-color: #fff;
		// margin-left: 20rpx;
		display: flex;
		align-items: center;
		// position: fixed;
		flex-wrap: nowrap;
		overflow: auto;
		// z-index: 999;
		justify-content: space-around;
		 overflow-x: auto; /* 允许横向滚动 */
		    overflow-y: hidden; /* 隐藏纵向滚动 */
		    -webkit-overflow-scrolling: touch; /* 在iOS上实现平滑滚动 */
		    white-space: nowrap; /* 防止子元素换行 */
		    /* 隐藏滚动条（可选） */
		    scrollbar-width: none; /* Firefox */
		    &::-webkit-scrollbar {
		        display: none; /* Chrome/Safari */
		    }
		.tab-list-item {
			position: relative;
			width: 30%;
			 min-width: 200rpx; /* 设置最小宽度防止内容挤压 */
			        display: inline-flex; /* 改为行内flex布局 */
			        flex-shrink: 0; /* 防止子项被压缩 */
			        justify-content: center;
			        align-items: center;
			.text {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10rpx;
				opacity: 1;
				font-weight: 500;
				text-align: center;
				font-size: 32rpx;
				color: #A6A5AF;
				z-index: 99;
				position: relative;
			}

			.active {
				font-weight: 700;
				color: #333333;
				z-index: 98;
				position: relative;
			}

			.line {
				width: 66rpx;
				height: 10rpx;
				background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
				border-radius: 118rpx 118rpx 118rpx 118rpx;
				position: absolute;
				top: 70%;
				left: 50%;
				transform: translate(-50%);
				z-index: 60;
			}
		}
	}
</style>